;(function (window) {

  const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        if (el.contains(e.target)) {
          return false;
        }
        if (binding.expression) {
          binding.value(e);
        }
      }

      el.__vueClickOutside__ = documentHandler;
      document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
      document.removeEventListener('click', el.__vueClickOutside__);
      delete el.__vueClickOutside__;
    },
  };

  const hlPopover = {
    template:`<div class="hl-popover"
         ref="hl-popover"
         :class="[ placement ? 'hl-placement-' + placement : '']"
         :style="{'width':width + 'px'}"
         :x-placement="placement"
         v-clickoutside="handleClose"
    >
      <div class="hl-popover__title" v-if="title" v-text="title">{{title}}</div>
      <div class="hl-popover__content">
        {{content}}
        <slot name="content"></slot>
      </div>
      <div class="hl-popover__arrow"></div>
    </div>`,
    data(){
      return {
        isShowPop:false
      }
    },
    props:{
      isShow:{
        type:Boolean,
        default:false
      },
      title:{
        type:String,
        default:''
      },
      content: {
        type:String,
        default:''
      },
      width: {
        type:[String,Number],
        default:'150'
      },
      placement: {
        type:String,
        default:'bottom'
      },
      trigger: {
        type:String,
        default:'hover'
      },
    },
    directives:{clickoutside},
    watch:{
      isShow(val){
        this.isShowPop = val
      }
    },
    computed:{

    },
    created(){
      this.isShowPop = this.isShow
    },
    methods:{
      // 定位
      initPosition(){
        const popoverWidth = this.width , popoverHeight = this.$refs['hl-popover'].offsetHeight , placement = this.placement
        const elWidth = 15 , elHeight = 15 , left = this.left , top = this.top
        const position = this.getPosition({'width':elWidth,'height':elHeight,'left':left,'top':top} , {'width':popoverWidth , 'height':popoverHeight } , placement )

        this.$refs['hl-popover'].style.left = position.left + 'px'
        this.$refs['hl-popover'].style.top = position.top + 'px'
      },
      getPosition(ele1,ele2,placement){
        const gw = ele1.width,
              gh = ele1.height,
              gl = ele1.left,
              gt = ele1.top,
              xw = ele2.width,
              xh = ele2.height,
              margin = 10;
              gasket = 130;

        let xl = null,xt = null;

        switch (placement) {
          case 'top':
            xl = gl - (xw - gw) / 2
            xt = gt - xh - margin - gasket
            break;
          case 'right':
            xl = gl + gw
            xt = gt - (xh - gh) / 2 - gasket
            break;
          case 'bottom':
            xl = gl - (xw - gw) / 2
            xt = gt + gh - gasket
            break;
          case 'left':
            xl = gl - xw - margin
            xt = gt - (xh - gh) / 2 - gasket
            break;
          default:

        }

        return {
          'left':xl,
          'top':xt
        }
      },
      handleClose(){
        this.$refs['hl-popover'].style.left = '1000000px'
        this.$refs['hl-popover'].style.top = '1000000px'
      },

    }
  }

  Vue.component('hl-popover',hlPopover)

} (window))
